<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
</head>
<body>
<cms-layout layout="admin/layout/master">
    <div id="app">
        <el-form :model="adminUser" label-width="80px">
            <el-form-item label="帐号">
                <span th:text="${adminUser.username}"></span>
            </el-form-item>
            <el-form-item label="角色">
                <span th:text="${adminUser.roles == null?'':adminUser.roles.name}"></span>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="adminUser.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="adminUser.password"></el-input>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/api/file/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="adminUser.avatar" :src="adminUser.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</cms-layout>
</body>


<script th:inline="javascript">
    let app = new Vue({
        el: '#app',
        data: function () {
            return {
                adminUser: {
                    name: [[${adminUser.name}]],
                    password: '',
                    avatar: [[${adminUser.photo != null ? adminUser.photo.url:""}]],
                    photo_md5: [[${adminUser.photo != null ? adminUser.photo.md5:""}]],
                }
            }

        },
        created: function () {
            console.log(this.adminUser)
        },
        methods: {
            handleAvatarSuccess(res, file) {
                console.log(file);
                console.log(res);
                if (res.code == 0) {
                    this.adminUser.avatar = res.data.url;
                    this.adminUser.photo_md5 = res.data.md5;
                } else {
                    this.$message.error(res.msg);
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/bmp' || file.type === 'image/webp';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('只能上传图片!' + file.type);
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            submitForm() {
                let that = this;
                axios.put('/admin/account/update', this.adminUser).then(function (res) {
                    res = res.data;
                    that.$message({
                        type: 'success',
                        message: res.msg
                    });
                    setTimeout(function (){
                        window.location.reload();
                    },500);

                }).catch(function (err) {
                    that.$message({
                        type: 'error',
                        message: err.msg
                    });
                }).finally(function () {

                });
            }

        },
    })

</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
